<template>
  <!--实体ID 策略修改详情-->
  <section class="component">
    <el-form :model="model" ref="see-log-item" label-width="125px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="策略名称" prop="strategyName">
            <el-input :disabled=true type="input" v-model="model.strategyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优先级" prop="priorityNo">
            <el-input :disabled=true type="input" v-model="model.priorityNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实体类型" prop="entityType">
            <el-select :disabled=true v-model="model.entityType" placeholder="请选择">
              <el-option v-for="{ index, name, code } in $dict.getDictData('EntityType')" :key="index" :label="name" :value="code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实体编码" prop="entityCode">
            <el-input :disabled=true type="input" v-model="model.entityCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实体状态" prop="commonState">
            <el-select :disabled=true v-model="model.commonState" placeholder="请选择">
              <el-option v-for="{ index, name, code } in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card class="cardStyle">
            <div slot="header" class="row between-span">
              <span>设置获取数据规则</span>
              <el-button :disabled="true">增加</el-button>
            </div>
            <expression-base :modifyData="modifyData.labelStatus" :openData=3 v-model="strategyDataSet" :entityIdStr='entityIdStr' :flag="true"></expression-base>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="widthMargin">
          <el-form-item label="策略注记" prop="strategyNotes">
            <el-input :disabled=true type="textarea" v-model="model.strategyNotes" :autosize="{ minRows: 2, maxRows: 4 }" :maxlength="500" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="modifyData.operateType==='UPDATE'">
        <el-col class="widthStyle">
          <el-form-item label="审批历史">
            <data-box :data="dataset" @onPageChange="refreshData" class="paddingNone">
              <template slot="columns">
                <el-table-column prop="approvalRealName" label="审批人" :min-width="$helper.getColumnWidth(3)">
                </el-table-column>
                <el-table-column prop="approvalTime" label="审批时间" :formatter="row => $filter.dateTimeFormat(row.approvalTime)" :min-width="$helper.getColumnWidth(3)">
                </el-table-column>
                <el-table-column prop="applyStatus" label="审批结果" :formatter="row => $filter.dictConvert(row.applyStatus,'ApplyStatus')" :min-width="$helper.getColumnWidth(3)">
                </el-table-column>
                <el-table-column prop="approvalOpinion" label="审批意见" :min-width="$helper.getColumnWidth(3)">
                </el-table-column>
              </template>
            </data-box>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="operate-buttons">
        <el-button @click="emitClose">关闭</el-button>
      </div>
    </el-form>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import ExpressionBase from "./expression-base.vue";
import { IstrategyInfo } from "./strategy-helper.config";
import { Emit, Prop } from "vue-property-decorator";
import { EntityIdService } from "~/services/management-service/entity-id.service";

@Component({
  components: {
    ExpressionBase
  }
})
export default class SeeLogItem extends Vue {
  @Dependencies(EntityIdService) private entityIdService: EntityIdService;
  @Prop({
    type: Object
  })
  private modifyData: object;
  private dataset: any[] = []
  private model: any = {
    strategyName: "",
    priorityNo: "", // 优先级
    description: "", // 策略注记
    entityCode: "", // 实体编码
    entityType: "", // 实体类型
    strategyNotes: "", //策略描述
    formulaJson: "[]"
  };
  private entityIdStr = 'ENTITYID'

  @Emit("refreshData")
  public refreshData () { }
  @Emit("close")
  private emitClose () {
    this.strategyDataSet = [];
    this.model.id = "";
    this.refreshData();
  }

  private get strategyDataSet () {
    if (!this.model.formulaJson) return [];
    return JSON.parse(this.model.formulaJson) as IstrategyInfo[];
  }

  private set strategyDataSet (value) {
    this.model.formulaJson = JSON.stringify(value);
  }
  /**
   * 弹框打开时初始化页面信息
   */
  private refresh () {
    this.model = this.modifyData
    const id = { id: this.model.id };
    (id.id) ? this.entityIdHistory(id) : this.dataset = []
  }
  /**
   * 实体ID审批记录
   */
  private entityIdHistory (id) {
    this.entityIdService.findEntityIdHistory(id).subscribe(data => {
      this.dataset = data
    })
  }
}
</script>

<style lang="less" scoped>
.cardStyle {
  width: 634px !important;
  margin-left: 64px !important;
  box-shadow: none !important;
  border-bottom: 1px solid #ebeef5 !important;
}
.widthMargin {
  width: 699px !important;
  margin-top: 20px !important;
}
.widthStyle {
  width: 699px !important;
}
.paddingNone {
  padding: 0 !important;
}
</style>
